{%extends "base.html"%}
{%block title%}
登录
{%endblock%}
{%block body%}
<script>
    var login_frame;

    $(document).ready(() => {
        login_frame = new Vue({
            el: "#login-frame",
            delimiters: ['{[', ']}'],
            mixins: [baseMixin],
            data: {
                error_message: "",
                identifier: "",
                password: "",
                success_message: "",
                loading: false
            },
            mounted() {
                if (this.base.isLogin) {
                    window.location.href = "/";
                    return;
                }
            },
            methods: {
                login: function () {
                    console.log("Logining..");
                    this.error_message = this.success_message = "";
                    if (this.identifier == "" || this.password == "") {
                        this.error_message = "请输入用户名或密码";
                        return;
                    }
                    $.post("/api/login", {
                        identifier: login_frame.identifier, password: this.md5WithSalt(login_frame.password)
                    }).done(function (ctx) {
                        ctx = JSON.parse(ctx);
                        console.log(ctx);
                        if (ctx.code == 0) {
                            window.location.href = "/";
                        } else {
                            login_frame.error_message = ctx.message;
                        }

                    });
                }, resetPassword() {
                    this.error_message = "";
                    if (this.identifier == "") {
                        this.error_message = "请输入用户名或电子邮件";
                        return;
                    }
                    this.loading = true;
                    $.post("/api/require_reset_password", { identifier: login_frame.identifier }).done((ctx) => {
                        ctx = JSON.parse(ctx);
                        this.loading = false;
                        if (ctx.code != 0) {
                            this.error_message = ctx.message;
                        } else {
                            this.success_message = ctx.message;
                        }
                    })
                }
            }
        });
    });

</script>
<div style="top:10%;max-width: 500px;">
    <div class="ui left aligned container">
        <div class="ui header">
            <h1>登录</h1>
        </div>
        <div class="ui stack segment" id="login-frame">
            <div class="ui active dimmer" v-if="loading">
                <div class="ui loader"></div>
            </div>
            <div class="ui form" v-bind:class="{error:error_message!='',success:success_message!=''}">
                <div class="ui field">
                    <label>用户名或邮箱:</label>
                    <input type="text" placeholder="用户名或邮箱.." v-model="identifier">
                </div>
                <div class="field">
                    <label>密码</label>
                    <input type="password" v-model="password" placeholder="密码.." v-on:keyup.enter="login">
                </div>
                <div class="ui error message">
                    <div class="header">错误</div>
                    <p>{[error_message]}</p>
                </div>
                <div class="ui success message">
                    <div class="header">成功</div>
                    <p>{[success_message]}</p>
                </div>
                <div class="ui green submit button" v-on:click="login">提交</div><a href="/register">注册</a> <a
                    v-on:click="resetPassword">重置密码</a>
            </div>
        </div>
    </div>
</div>
{%endblock%}